<template>
  <div class="app-container">
    <div class="flex justify-around mt-2 mb-4">
      <el-card
        v-for="(item, index) in countList"
        :key="item.id"
        style="width: 230px"
        class="cursor-pointer"
        :class="{ 'bg-gray-200': activeIndex === index }"
        @click="tabsClick(item, index)"
      >
        <div class="flex justify-around items-center">
          <el-image :src="item.icon" style="width: 70px; height: 70px" />
          <div>
            <p class="m-0 text-center color-4966FF font-bold text-3xl">{{ item.num }}</p>
            <p class="m-0 text-center color-9A9A9A text-sm font-bold">{{ item.label }}</p>
          </div>
        </div>
      </el-card>
    </div>
    <FormTable
      :list="list"
      :total="total"
      :currentIndex="activeIndex"
      @get-list="getList"
      @detail-fn="handleDetail"
      @get-count-data="getCountData"
      @edit-fn="handleEdit"
    />
    <Component
      v-model="visible"
      :is="dialogName"
      v-bind="{ formData, logList, currentIndex: activeIndex, taskId }"
      v-on="{ getList, getCountData }"
    />
  </div>
</template>

<script setup>
  import { ref } from 'vue';
  import { useRouter } from 'vue-router';
  import PendingApprovalIcon from '@/assets/images/flowable/pending-approval-icon.png';
  import ApprovedIcon from '@/assets/images/flowable/approved-icon.png';
  import MyInitiationIcon from '@/assets/images/flowable/my-initiation-icon.png';
  import CompletedIcon from '@/assets/images/flowable/completed.png';
  import {
    approvalDetail,
    approvalLog,
    approvedList,
    completedDetail,
    completedList,
    countData,
    pendingApproval,
    submittedList,
  } from '@/api/flowable/process-center';
  import FormTable from './component/list.vue';
  import FormDetail from '@/views/flowable/form-list/component/form-detail.vue';

  const router = useRouter();

  const countList = ref([
    {
      id: 'todo',
      label: '待审批',
      num: '-',
      icon: PendingApprovalIcon,
      fn: getPendingApprovalList,
      deleteFn: '',
    },
    {
      id: 'approved',
      label: '已审批',
      num: '-',
      icon: ApprovedIcon,
      fn: getApprovedList,
      deleteFn: '',
    },
    {
      id: 'mySubmit',
      label: '我的发起',
      num: '-',
      icon: MyInitiationIcon,
      fn: getSubmittedList,
      deleteFn: '',
    },
    {
      id: 'done',
      label: '已完成',
      num: '-',
      icon: CompletedIcon,
      fn: getCompletedList,
      deleteFn: '',
    },
  ]);
  const list = ref([]);
  const total = ref(0);
  const pageParams = ref({
    pageNum: 1,
    pageSize: 10,
  });
  const queryParams = ref({});
  const currentTab = ref(null);
  const activeIndex = ref(1);
  const dialogName = ref(null);
  const orderConfig = [
    {
      businessType: 'commonApply', // 表单类型
      route: 'Form-list', // 修改时跳转对应路由表单页面
      dialogName: FormDetail, // 对应弹窗
    },
  ];
  const taskId = ref(null);
  const formData = ref({});
  const visible = ref(false);
  const logList = ref([]);

  async function getPendingApprovalList() {
    const res = await pendingApproval(pageParams.value, queryParams.value);
    list.value = res?.data?.records ?? [];
    total.value = res?.data?.total ?? 0;
  }

  async function getApprovedList() {
    const res = await approvedList(pageParams.value, queryParams.value);
    list.value = res?.data?.records ?? [];
    total.value = res?.data?.total ?? 0;
  }

  async function getSubmittedList() {
    const res = await submittedList(pageParams.value, queryParams.value);
    list.value = res?.data?.records ?? [];
    total.value = res?.data?.total ?? 0;
  }

  async function getCompletedList() {
    const res = await completedList(pageParams.value, queryParams.value);
    list.value = res?.data?.records ?? [];
    total.value = res?.data?.total ?? 0;
  }

  async function getCountData() {
    const res = await countData();
    const { data } = res;
    for (const dataKey in data) {
      const idx = countList.value.findIndex((f) => f.id === dataKey);
      if (idx !== -1) {
        countList.value[idx].num = data[dataKey];
      }
    }
  }

  function getList(page, query) {
    pageParams.value = page;
    queryParams.value = query;
    currentTab.value.fn();
  }

  async function getFormDetail(row, findInfo) {
    const { instance, id } = row;
    let res = null;
    if ([0, 1].includes(activeIndex.value)) {
      res = await approvalDetail({ id });
    } else {
      res = await completedDetail({ id });
    }
    formData.value = res.data;
    taskId.value = row.id;
    await getLogList(instance ? row?.instance?.id : id);
    dialogName.value = findInfo.dialogName;
    visible.value = true;
  }

  async function getLogList(id) {
    const res = await approvalLog(id);
    logList.value = res?.data?.records ?? [];
  }

  function handleDetail(row) {
    const { businessType } = row;
    const findInfo = orderConfig.find((f) => f.businessType === businessType);
    if (findInfo) {
      getFormDetail(row, findInfo);
    }
  }

  function handleEdit(row) {
    const routeName = orderConfig.find((f) => f.businessType === row.businessType)?.route;
    if (!routeName) return;
    router.push({
      name: routeName,
      query: {
        id: row.businessId,
        processInstanceId: row?.instance ? row.instance.processInstanceId : row.processInstanceId,
        logId: row?.instance ? row?.instance?.id : row.id,
      },
    });
  }

  function tabsClick(item, index) {
    pageParams.value = {
      pageNum: 1,
      pageSize: 10,
    };
    currentTab.value = item;
    activeIndex.value = index;
    item.fn();
  }

  tabsClick(countList.value[0], 0);
  getCountData();
</script>

<style scoped lang="scss">
  .color-4966FF {
    color: #4966ff;
  }

  .color-9A9A9A {
    color: #9a9a9a;
  }
</style>
